import { Matrix4, Vector2, Matrix3, Vector3, Vector4, Color } from "@nirvana/math";
import { WebGLCanvas } from "@nirvana/canvas";
import {
  Camera,
  BallGeometry,
  BoxGeometry,
  PlaneGeometry,
  ConeGeometry,
  CylinderGeometry,
  RingGeometry,
  PipeGeometry,
  TorusGeometry,
  Mesh,
  WireframeMesh,
  SimpleMaterial
} from "@nirvana/core";
import * as dat from "dat.gui";

async function main() {
  // 使用使用 Canvas
  let canvas = document.getElementById("engine-nirvana") as HTMLCanvasElement;
  const webCanvas = new WebGLCanvas(canvas, {});
  const engine = webCanvas.engine;
  const scene = engine.sceneManager.createScene("root");

  const camera = new Camera("root camera", engine);
  scene.addCamera(camera);
  camera.transform.setPosition(0, 0, 10);

  const gl = engine.gl;

  const mtal = new SimpleMaterial("", {
    color: false,
    normal: true,
    uv: true
  });

  const ballGemotory = new BallGeometry(0.5);
  const childBallMesh = new Mesh(ballGemotory, mtal, "childMesh");
  const parentBallMesh = new Mesh(ballGemotory, mtal, "parentMesh");

  const planeGemotory = new PlaneGeometry();
  const childPlaneMesh = new Mesh(planeGemotory, mtal, "ball");
  const parentPlaneMesh = new Mesh(planeGemotory, mtal, "ball");

  const coneGemotory = new ConeGeometry();
  const coneMesh = new Mesh(coneGemotory, mtal, "ball");

  const cylinderGeometry = new CylinderGeometry();
  const cylinderMesh = new Mesh(cylinderGeometry, mtal, "ball");

  const ringGeometry = new RingGeometry();
  const ringMesh = new Mesh(ringGeometry, mtal, "ball");

  const pipeGeometry = new PipeGeometry(1.5, 2, 1, 3, 24);
  const pipeMesh = new Mesh(pipeGeometry, mtal, "ball");

  const torusGeometry = new TorusGeometry(0.5);
  const childTorusMesh = new Mesh(torusGeometry, mtal, "ball");
  const parentTorusMesh = new Mesh(torusGeometry, mtal, "ball");

  const boxGeometry = new BoxGeometry(0.5, 0.5, 0.5);
  const childBoxMesh = new Mesh(boxGeometry, mtal, "ball");
  const parentBoxMesh = new Mesh(boxGeometry, mtal, "ball");

  parentBoxMesh.addChildNode(childTorusMesh);
  childTorusMesh.transform.translateX(1);

  const wMesh = parentBoxMesh; //new WireframeMesh(ballMesh);
  wMesh.transform.rotateX(Math.PI / 4);

  scene.addEntity(wMesh);

  let Options = function () {
    this.button = function () {};
  };

  var options = new Options();
  var gui = new dat.GUI();

  // gui.add(options, "button").onChange((v) => {
  //   console.log(childBoxMesh.transform.getWorldPosition());
  // });

  // (event) => {
  //   const x = event.clientX;
  //   const y = event.clientY;

  //   console.log("onBegin", x, y);
  // };

  webCanvas.onBegin = webCanvas._strokeMoveUpdate = (event) => {
    // console.log(e)
    const x = event.clientX;
    const y = event.clientY;

    // ray: 从相机发射一条射线，经过鼠标点击位置

    const nx = (x - webCanvas.left - webCanvas.width / 2) / (webCanvas.width / 2.0);
    const ny = (webCanvas.height / 2 - (y - webCanvas.top)) / (webCanvas.height / 2.0);
    // const cameraPos = camera.transform.position;
    // const ret = camera.pickRay(nx, ny);
    // console.log(ret);
    let pickResult = scene.pickMesh(nx, ny);

    // console.log(pickResult);
    if (pickResult.length > 0) {
      pickResult[0].transform.rotateX(0.1);
      // debugger;
    }
  };

  const angle = 0.1;
  // wMesh.transform.rotate(0.1, 0.1, 0);
  // wMesh.transform.modelMatrix;
  // wMesh.transform.rotateX(angle);
  engine.update = () => {
    // childMesh.transform.rotateY(angle);
    // childMesh.transform.rotateX(angle);
    //
  };
}

main();
